<template>
  <div id="productApplysAdd" class="productApplysAdd">

    <!-- 新增/修改内容 -->
    <div class="modify_center">
      <el-form ref="addForm" :model="formDialog" :rules="rules" label-width="160px" label-position="right">

        <p class="title_H1" style="margin-bottom: 20px;">基础信息</p>
        <div class="r_flex" style="padding: 0 80px;">
          <div style="width: 46%; display: inline-block;">
            <el-form-item label="产品LOGO" prop="logo">
              <Up-img :oss-image-url="ossImageUrl" :theme="'rectangular'" :number="1" />
            </el-form-item>
            <el-form-item label="产品名称" prop="name">
              <el-input v-model="formDialog.name" style="width: 100%" placeholder="请输入产品名称" />
            </el-form-item>
            <el-form-item label="所属渠道" prop="deptId">
              <el-select v-model="optionsKey" :disabled="Boolean(this.$route.query.productId)" style="width: 100%" filterable placeholder="请选择" @change="optionsChange">
                <el-option
                  v-for="(item, index) in options"
                  :key="index"
                  :label="item.deptName"
                  :value="item.deptId"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="产品单价" prop="price">
              <el-input v-model="formDialog.price" style="width: 100%" placeholder="请输入产品单价" />
            </el-form-item>
            <!-- <el-form-item label="公司主体" prop="company">
              <el-input v-model="formDialog.company" placeholder="请输入公司主体" />
            </el-form-item>
            <el-form-item label="资产来源" prop="assetsSource">
              <el-input v-model="formDialog.assetsSource" placeholder="请输入资产来源" />
            </el-form-item>
            <el-form-item label="所需材料" prop="assets">
              <el-input v-model="formDialog.assets" style="width: 100%" placeholder="多个材料用‘，’隔开，(如：车产，芝麻分600以上)" />
            </el-form-item>
            <el-form-item label="产品客服" prop="waiterMobile">
              <el-input v-model="formDialog.waiterMobile" placeholder="请输入产品客服" />
            </el-form-item> -->
          </div>
          <div style="width: 8%" />
          <div style="width: 46%; display: inline-block;">
            <el-form-item label="每日限量" prop="todayNum">
              <el-input v-model="formDialog.todayNum" style="width: 100%" placeholder="请输入每日限量" />
            </el-form-item>
            <el-form-item label="进量限制" prop="timeLimit">
              <el-input v-model="formDialog.timeLimit" style="width: 100%" placeholder="一小时内进量限制" />
            </el-form-item>
            <el-form-item label="月利息" required>
              <el-form-item prop="rate">
                <el-input v-model="formDialog.rate" placeholder="月利息">
                  <template slot="append">%</template>
                </el-input>
              </el-form-item>
            </el-form-item>
            <el-form-item label="贷款额度" required>
              <el-col :span="11">
                <el-form-item prop="lowAmount">
                  <el-input v-model="formDialog.lowAmount" type="number" placeholder="最低贷款额度">
                    <template slot="append">万</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="2" style="text-align: center">至</el-col>
              <el-col :span="11">
                <el-form-item prop="highAmount">
                  <el-input v-model="formDialog.highAmount" type="number" placeholder="最高贷款额度">
                    <template slot="append">万</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="贷款期限" required>
              <el-col :span="11">
                <el-form-item prop="lowLoanTerm">
                  <el-input v-model="formDialog.lowLoanTerm" placeholder="最短贷款月数">
                    <template slot="append">月</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="2" style="text-align: center">至</el-col>
              <el-col :span="11">
                <el-form-item prop="highLoanTerm">
                  <el-input v-model="formDialog.highLoanTerm" placeholder="最高贷款月数">
                    <template slot="append">月</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="产品标签" prop="tag">
              <el-input v-model="formDialog.tag" style="width: 100%" placeholder="请输入产品标签（公司名称）" />
            </el-form-item>

            <!-- <el-form-item label="房产要求" prop="requireHourse">
              <el-input v-model="formDialog.requireHourse" placeholder="请输入房产要求" />
            </el-form-item>
            <el-form-item label="工资要求" prop="requireWage">
              <el-input v-model="formDialog.requireWage" placeholder="请输入工资要求" />
            </el-form-item>
            <el-form-item label="工作要求" prop="requireWork">
              <el-input v-model="formDialog.requireWork" placeholder="请输入工作要求" />
            </el-form-item> -->

            <!-- <el-form-item label="放款时间" prop="tag">
              <el-input v-model="formDialog.tag" style="width: 100%" placeholder="请输入最短放款时间">
                <template slot="append">小时</template>
              </el-input>
            </el-form-item> -->
            <!-- <el-form-item label="所需材料">
              <el-checkbox-group v-model="materialAssets">
                <el-checkbox label="0">无芝麻分</el-checkbox>
                <el-checkbox label="1">600分以下</el-checkbox>
                <el-checkbox label="2">600-650分</el-checkbox>
                <el-checkbox label="3">650-700分</el-checkbox>
                <el-checkbox label="4">700分以上</el-checkbox>
              </el-checkbox-group>
            </el-form-item> -->

          </div>
        </div>
        <p class="title_H1" style="margin-bottom: 20px;">投放配置</p>
        <div class="r_flex" style="padding: 0 80px;">
          <div style="width: 46%; display: inline-block;">
            <el-form-item label="推广开关" prop="status">
              <el-radio v-model="formDialog.status" :label="1">开启</el-radio>
              <el-radio v-model="formDialog.status" :label="0">关闭</el-radio>
            </el-form-item>
            <el-form-item label="投放城市" prop="cityId">
              <el-tooltip class="item" show-overflow-tooltip :disabled="isShowTooltip" effect="dark" placement="right-start">
                <div class="r_text_line" style="background: #fff; border-radius: 5px; width: 100%; min-height: 72px;" @mouseover="onMouseOver()">
                  <span ref="str">{{ cityArrHtml }}</span>
                </div>
                <div slot="content" style="width: 1000px; line-height: 20px;">{{ cityArrHtml }}</div>
              </el-tooltip>
            </el-form-item>
            <el-form-item label="选择省份" prop="">
              <el-select v-model="cityKey" style="width: 100%" filterable placeholder="请选择" @change="cityChange">
                <el-option label="清空投放省市" value="null" />
                <el-option label="选择全国" value="all" />
                <el-option
                  v-for="(item, index) in allCityArr"
                  :key="index"
                  :label="index"
                  :value="index"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="选择城市">
              <div class="checkbox_border r_flex_wrap">
                <!-- 选择全省 -->
                <div v-if="cityKey && cityKey != 'null' && cityKey != 'all' " class="checkbox_list r_text_none" @click="allcityChange(checkAll)">
                  <div class="checkbox_icon r_flex_center" :class="checkAll?'active_icon':''">
                    <i class="el-icon-check" />
                  </div>
                  <span>选择全省</span>
                </div>
                <!-- 城市名单 -->
                <div v-for="city in allCityArr[cityKey]" :key="city.ccode" class="checkbox_list r_text_none" :label="city" @click="cityActiveChange(city)">
                  <div class="checkbox_icon r_flex_center" :class="city.active?'active_icon':''">
                    <i class="el-icon-check" />
                  </div>
                  <span>{{ `${city.cname}` }}</span>
                </div>
              </div>
            </el-form-item>

          </div>
          <div style="width: 8%" />
          <div style="width: 46%; display: inline-block;">
            <el-form-item label="产品类型" prop="type">
              <el-radio v-model="formDialog.type" :label="1">h5/全流程</el-radio>
              <el-radio v-model="formDialog.type" :label="2">半流程</el-radio>
            </el-form-item>
            <el-form-item label="上架时间" prop="startTime">
              <div class="r_flex">
                <el-time-picker
                  v-model="alltime"
                  is-range
                  value-format="HH:mm:ss"
                  format="HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  @change="changtime"
                />
              </div>
            </el-form-item>
            <el-form-item label="上架时间2" prop="startTime2">
              <div class="r_flex">
                <el-time-picker
                  v-model="alltime2"
                  is-range
                  value-format="HH:mm:ss"
                  format="HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  @change="changtime2"
                />
              </div>
            </el-form-item>
            <el-form-item label="上架星期" prop="openWeek">
              <MyCheckbox :active-check="weekArr" :checkbox-data="ArrCheck" @checkboxChange="checkboxChange" />
            </el-form-item>
          </div>
        </div>
        <p class="title_H1" style="margin-bottom: 20px;">
          资质筛选
          <!-- <span style="color: #fff; margin-left: 10px;">(如果以下都留空的话就不会有任何客户可以看见贵司的产品)</span> -->
        </p>
        <div class="r_flex" style="padding: 0 80px;">
          <div style="width: 46%; display: inline-block; position: relative;">
            <p style="line-height: 40px; color:#ff0000; font-weight: 900;">基础筛选选项（为必要满足条件）</p>
            <el-form-item label="年龄要求" required>
              <el-col :span="11">
                <el-form-item prop="lowAge">
                  <el-input v-model="formDialog.lowAge" placeholder="最低年龄">
                    <template slot="append">周岁</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="2" style="text-align: center">至</el-col>
              <el-col :span="11">
                <el-form-item prop="highAge">
                  <el-input v-model="formDialog.highAge" placeholder="最高年龄">
                    <template slot="append">周岁</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="芝麻分" prop="zhimaCredit">
              <el-checkbox-group v-model="zhimaCreditArr">
                <el-checkbox label="0">无芝麻分</el-checkbox>
                <el-checkbox label="1">600分以下</el-checkbox>
                <el-checkbox label="2">600-650分</el-checkbox>
                <el-checkbox label="3">650-700分</el-checkbox>
                <el-checkbox label="4">700分以上</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="工作" prop="">
              <el-checkbox-group v-model="jobArr">
                <el-checkbox label="1">上班族</el-checkbox>
                <el-checkbox label="2">企业主</el-checkbox>
                <el-checkbox label="3">自由职业</el-checkbox>
                <el-checkbox label="4">公务员</el-checkbox>
              </el-checkbox-group>
            </el-form-item>

            <el-form-item label="信用情况" prop="">
              <el-checkbox-group v-model="xyArr">
                <el-checkbox label="1">信用良好</el-checkbox>
                <el-checkbox label="2">有逾期</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <!-- <el-form-item label="征信信息" prop="peopleBankCredit">
              <el-checkbox-group v-model="peopleBankCreditArr">
                <el-checkbox label="0">无人行征信</el-checkbox>
                <el-checkbox label="1">征信良好</el-checkbox>
                <el-checkbox label="2">有逾期，2年内60天以内</el-checkbox>
                <el-checkbox label="3">有逾期，2年内60天以上</el-checkbox>
                <el-checkbox label="4">有逾期，2年内90天以上</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="微粒贷" prop="microLoan">
              <el-checkbox-group v-model="microLoanArr">
                <el-checkbox label="0">无微粒贷</el-checkbox>
                <el-checkbox label="1">1~2千</el-checkbox>
                <el-checkbox label="2">2~5千</el-checkbox>
                <el-checkbox label="3">5千~1万</el-checkbox>
                <el-checkbox label="4">1万以上</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="信用卡" prop="creditCard">
              <el-checkbox-group v-model="creditCardArr">
                <el-checkbox label="1">有</el-checkbox>
                <el-checkbox label="0">无</el-checkbox>
              </el-checkbox-group>
            </el-form-item> -->
          </div>
          <div style="width: 8%" />
          <div style="width: 46%; display: inline-block; position: relative;">
            <p style="line-height: 40px; color:#ff0000; font-weight: 900;">其他筛选项</p>
            <el-form-item label="条件约束" prop="allMeet">
              <el-radio v-model="formDialog.allMeet" :label="1">以下条件，选中的都要满足</el-radio>
              <el-radio v-model="formDialog.allMeet" :label="0">以下条件，选中满足一条即可</el-radio>
            </el-form-item>
            <el-form-item label="筛选项" prop="">
              <el-checkbox-group v-model="screeningArr">
                <el-checkbox v-for="(sxdata, index) in screlabelArr" :key="index" :label="sxdata.id" @change="handlezhimaChange">{{ sxdata.name }}</el-checkbox>
                <el-checkbox label="null" @change="nullScreenin">以上都没有</el-checkbox>
              </el-checkbox-group>
            </el-form-item>

            

            <!-- <el-form-item label="花呗" prop="">
              <el-checkbox-group v-model="huabeiArr">
                <el-checkbox label="0">无花呗</el-checkbox>
                <el-checkbox label="1">3000以下</el-checkbox>
                <el-checkbox label="2">3000-10000</el-checkbox>
                <el-checkbox label="3">10000-30000</el-checkbox>
                <el-checkbox label="4">30000以上</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="京东白条" prop="">
              <el-checkbox-group v-model="baitiaoArr">
                <el-checkbox label="0">无京东白条</el-checkbox>
                <el-checkbox label="1">3000以下</el-checkbox>
                <el-checkbox label="2">3000-10000</el-checkbox>
                <el-checkbox label="3">10000-30000</el-checkbox>
                <el-checkbox label="4">30000以上</el-checkbox>
              </el-checkbox-group>
            </el-form-item> -->
          </div>

        </div>

        <p v-if="false" class="title_H1" style="margin-bottom: 20px;">风控推送设置</p>
        <div v-if="false" class="r_flex" style="padding: 0 80px;">
          <div style="width: 46%; display: inline-block;">
            <el-form-item label="风控开关" prop="fkStatus">
              <el-radio v-model="formDialog.fkStatus" :label="1">开启</el-radio>
              <el-radio v-model="formDialog.fkStatus" :label="0">关闭</el-radio>
            </el-form-item>
            <el-form-item label="近1个月贷款笔数" prop="b22170002">
              <el-radio v-model="formDialog.b22170002" :label="1">大于1</el-radio>
              <el-radio v-model="formDialog.b22170002" :label="2">大于2</el-radio>
              <el-radio v-model="formDialog.b22170002" :label="3">大于3</el-radio>
              <el-radio v-model="formDialog.b22170002" :label="4">大于4</el-radio>
              <el-radio v-model="formDialog.b22170002" :label="5">大于5</el-radio>
              <el-radio v-model="formDialog.b22170002" :label="10">大于10</el-radio>
              <el-radio v-model="formDialog.b22170002" :label="null">不做筛选</el-radio>
            </el-form-item>
            <el-form-item label="近3个月贷款笔数" prop="b22170003">
              <el-radio v-model="formDialog.b22170003" :label="1">大于1</el-radio>
              <el-radio v-model="formDialog.b22170003" :label="2">大于2</el-radio>
              <el-radio v-model="formDialog.b22170003" :label="3">大于3</el-radio>
              <el-radio v-model="formDialog.b22170003" :label="4">大于4</el-radio>
              <el-radio v-model="formDialog.b22170003" :label="5">大于5</el-radio>
              <el-radio v-model="formDialog.b22170003" :label="10">大于10</el-radio>
              <el-radio v-model="formDialog.b22170003" :label="null">不做筛选</el-radio>
            </el-form-item>
            <el-form-item label="近6个月贷款笔数" prop="b22170004">
              <el-radio v-model="formDialog.b22170004" :label="1">大于1</el-radio>
              <el-radio v-model="formDialog.b22170004" :label="2">大于2</el-radio>
              <el-radio v-model="formDialog.b22170004" :label="3">大于3</el-radio>
              <el-radio v-model="formDialog.b22170004" :label="4">大于4</el-radio>
              <el-radio v-model="formDialog.b22170004" :label="5">大于5</el-radio>
              <el-radio v-model="formDialog.b22170004" :label="10">大于10</el-radio>
              <el-radio v-model="formDialog.b22170004" :label="null">不做筛选</el-radio>
            </el-form-item>

            <!-- <el-form-item label="是否有逾期笔数" prop="overdue">
              <el-radio v-model="formDialog.overdue" :label="1">有逾期</el-radio>
              <el-radio v-model="formDialog.overdue" :label="0">无逾期</el-radio>
              <el-radio v-model="formDialog.overdue" :label="null">不做筛选</el-radio>
            </el-form-item> -->

            <el-form-item label="近6个月逾期笔数" prop="b22170025">
              <el-radio v-model="formDialog.b22170025" :label="1">有</el-radio>
              <el-radio v-model="formDialog.b22170025" :label="0">无</el-radio>
              <el-radio v-model="formDialog.b22170025" :label="null">不做筛选</el-radio>
            </el-form-item>
            <el-form-item label="近12个月逾期笔数" prop="b22170026">
              <el-radio v-model="formDialog.b22170026" :label="1">有</el-radio>
              <el-radio v-model="formDialog.b22170026" :label="0">无</el-radio>
              <el-radio v-model="formDialog.b22170026" :label="null">不做筛选</el-radio>
            </el-form-item>
            <el-form-item label="近24个月逾期笔数" prop="b22170027">
              <el-radio v-model="formDialog.b22170027" :label="1">有</el-radio>
              <el-radio v-model="formDialog.b22170027" :label="0">无</el-radio>
              <el-radio v-model="formDialog.b22170027" :label="null">不做筛选</el-radio>
            </el-form-item>
            <el-form-item label="近一个月贷款总额" prop="b22170007" >
              <el-input v-model="formDialog.b22170007" placeholder="<=近一个月贷款总额">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
            <el-form-item label="近一个月履约金额" prop="b22170040" >
              <el-input v-model="formDialog.b22170040" placeholder=">=近一个月履约金额">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </div>
          <div style="width: 8%" ></div>
          <div style="width: 46%; display: inline-block;">
            <!-- <el-form-item label="过滤网贷白户" prop="fengkong">
              <el-radio v-model="formDialog.fengkong" :label="0">过滤</el-radio>
              <el-radio v-model="formDialog.fengkong" :label="1">不过滤</el-radio>
            </el-form-item> -->
            <el-form-item label="过滤网贷黑户" prop="dark">
              <el-radio v-model="formDialog.dark" :label="1">过滤</el-radio>
              <el-radio v-model="formDialog.dark" :label="0">不过滤</el-radio>
              <el-radio v-model="formDialog.dark" :label="null">不做筛选</el-radio>
            </el-form-item>
            <el-form-item label="近1个月履约次数" prop="b22170045">
              <el-radio v-model="formDialog.b22170045" :label="1">大于或等于1</el-radio>
              <el-radio v-model="formDialog.b22170045" :label="2">大于或等于2</el-radio>
              <el-radio v-model="formDialog.b22170045" :label="3">大于或等于3</el-radio>
              <el-radio v-model="formDialog.b22170045" :label="4">大于或等于4</el-radio>
              <el-radio v-model="formDialog.b22170045" :label="5">大于或等于5</el-radio>
              <el-radio v-model="formDialog.b22170045" :label="10">大于或等于10</el-radio>
              <el-radio v-model="formDialog.b22170045" :label="null">不做筛选</el-radio>
            </el-form-item>
            <el-form-item label="近3个月履约次数" prop="b22170046">
              <el-radio v-model="formDialog.b22170046" :label="1">大于或等于1</el-radio>
              <el-radio v-model="formDialog.b22170046" :label="2">大于或等于2</el-radio>
              <el-radio v-model="formDialog.b22170046" :label="3">大于或等于3</el-radio>
              <el-radio v-model="formDialog.b22170046" :label="4">大于或等于4</el-radio>
              <el-radio v-model="formDialog.b22170046" :label="5">大于或等于5</el-radio>
              <el-radio v-model="formDialog.b22170046" :label="10">大于或等于10</el-radio>
              <el-radio v-model="formDialog.b22170046" :label="null">不做筛选</el-radio>
            </el-form-item>
            <el-form-item label="近6个月履约次数" prop="b22170047">
              <el-radio v-model="formDialog.b22170047" :label="1">大于或等于1</el-radio>
              <el-radio v-model="formDialog.b22170047" :label="2">大于或等于2</el-radio>
              <el-radio v-model="formDialog.b22170047" :label="3">大于或等于3</el-radio>
              <el-radio v-model="formDialog.b22170047" :label="4">大于或等于4</el-radio>
              <el-radio v-model="formDialog.b22170047" :label="5">大于或等于5</el-radio>
              <el-radio v-model="formDialog.b22170047" :label="10">大于或等于10</el-radio>
              <el-radio v-model="formDialog.b22170047" :label="null">不做筛选</el-radio>
            </el-form-item>
            <el-form-item label="贷款已结清笔数" prop="b22170052">
              <el-radio v-model="formDialog.b22170052" :label="1">大于或等于1</el-radio>
              <el-radio v-model="formDialog.b22170052" :label="2">大于或等于2</el-radio>
              <el-radio v-model="formDialog.b22170052" :label="3">大于或等于3</el-radio>
              <el-radio v-model="formDialog.b22170052" :label="4">大于或等于4</el-radio>
              <el-radio v-model="formDialog.b22170052" :label="5">大于或等于5</el-radio>
              <el-radio v-model="formDialog.b22170052" :label="10">大于或等于10</el-radio>
              <el-radio v-model="formDialog.b22170052" :label="null">不做筛选</el-radio>
            </el-form-item>
            <el-form-item label="正常还款比例" prop="b22170034" >
              <el-input v-model="formDialog.b22170034" placeholder="正常还款比例">
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
            <el-form-item label="最低贷款行为分" prop="b22170001" >
              <el-input v-model="formDialog.b22170001" placeholder="最低贷款行为分（380-880）">
              </el-input>
            </el-form-item>
          </div>
        </div>

      </el-form>
    </div>

    <!-- 操作按钮 -->
    <div class="button_center r_flex_center">
      <el-button type="primary" @click="submitForm">保存产品</el-button>
    </div>
  </div>
</template>

<script>
import { listProduct, getProduct, addProduct, updateProduct } from '@/api/product/product'
import { getChannel, getCity } from '@/api/xxc'
import { cityTree } from '@/api/business/city'

import UpImg from '@/components/UpImg'
import CityInput from '@/components/CityInput'
import MyCheckbox from '@/components/MyCheckbox'

export default {
  name: 'ProductApplysAdd',
  components: { UpImg, CityInput, MyCheckbox },
  data() {
    return {
      // 添加/修改表单参数
      formDialog: {
        // 产品ID
        productId: '',
        // 渠道名称
        deptName: '',
        // 渠道ID
        deptId: '',
        // 产品logo
        logo: '',
        // 产品名称
        name: '',
        // 产品机构信息
        info: '',
        // 产品单价
        price: '',
        // 产品标签
        tag: '',
        // 最低额度
        lowAmount: '',
        // 最高额度
        highAmount: '',
        lowAge: '',
        highAge: '',
        // 结束时间
        startTime: '',
        // 开始时间
        endTime: '',
        // 开始时间2
        startTime2: '',
        // 结束时间2
        endTime2: '',
        // 推广开关
        status: '',
        type:'',
        creditCard: '',
        // 条件约束
        allMeet: 0,
        // 芝麻分
        zhimaCredit: 0,
        peopleBankCredit: 0,
        microLoan: 0,
        // 社保
        fund: 0,
        // 公积金缴纳
        has: 0,
        // 房产情况
        houseProperty: 0,
        // 车产情况
        carProperty: 0,
        // 保险保单
        bdStatus: 0,
        // 城市ID
        cityId: '',
        // 最高贷款期限
        highLoanTerm: '',
        // 最低贷款期限
        lowLoanTerm: '',
        // 所需材料
        assets: '',
        // 每日限数
        todayNum: '',
        timeLimit: '',
        // 上架星期
        openWeek: '',
        company: '',
        // 月利息
        rate: '',
        // app信息
        requireHourse: '',
        requireWage: '',
        waiterMobile: '',
        requireWork: '',
        assetsSource: '',
        // 风控设置
        fkStatus: 0,
        b22170002: null,
        b22170003: null,
        b22170004: null,
        B22170001: '',
        dark: null,
        b22170045: null,
        b22170046: null,
        b22170047: null,
        b22170052: null,
        b22170034: '',
        b22170025: null,
        b22170026: null,
        b22170027: null,
        b22170007: null,
        b22170040: null,
        url: ''
      },
      // 所需材料
      materialAssets: [],
      // 上架星期
      weekArr: [],
      // 筛选项选中数组
      screeningArr: [],
      jobArr: [],
      xyArr: [],
      // 芝麻分选中数组
      zhimaCreditArr: [],
      microLoanArr: [],
      creditCardArr: [],
      peopleBankCreditArr: [],
      baitiaoArr: [],
      huabeiArr: [],
      // 社保选中数组
      fundArr: [],
      // 房产选中数组
      housePropertyArr: [],
      // 车产选中数组
      carPropertyArr: [],
      // 保单情况选中数组
      bdStatusArr: [],
      // 公积金缴纳选中数组
      hasArr: [],
      // 城市选中数组
      cityArr: [],
      // 城市选中数组-text
      cityArrHtml: '',
      // 全国城市数组
      allCityArr: [],
      // 选中省份
      cityKey: '',
      // 选中省份-全部城市
      cityActive: [],
      // 选中省份-选择城市
      cityActiveArr: [],
      // 渠道
      options: [],
      // 选中机构
      optionsKey: '',
      isShowTooltip: false,
      defaultTime: [],
      // 时间段
      alltime: '',
      alltime2: '',
      // 表单校验
      rules: {
        // productId: [{ required: true, message: '不能为空', trigger: 'blur' }],
        Status: [{ required: true, message: '请选择', trigger: 'blur' }],
        deptId: [
          { required: true, message: '所属渠道不能为空', trigger: 'blur' },
          { pattern: /^[0-9]+$/, message: '所属渠道参数不合法' }
        ],
        name: [
          { required: true, message: '产品名称不能为空', trigger: 'blur' },
          {
            pattern: /^[A-Za-z0-9\u4e00-\u9fa5\-\_]{2,16}$/,
            message: '产品名称由2-16位数字或字母、汉字、中/下划线组成！'
          }
        ],
        logo: [{ required: true, message: 'logo不能为空', trigger: 'blur' }],
        todayNum: [
          { required: true, message: '日投放量不能为空', trigger: 'blur' },
          { pattern: /^[0-9]{1,10}$/, message: '日投放量由1-10位数字组成！' }
        ],
        price: [
          { required: true, message: '产品单价不能为空', trigger: 'blur' },
          {
            pattern: /^[0-9]+(.[0-9]{2})?$/,
            message: '产品单价只支持数字，小数点后两位！'
          }
        ],
        tag: [
          { required: true, message: '产品标签不能为空', trigger: 'blur' },
          {
            pattern: /^[A-Za-z0-9\u4e00-\u9fa5\-\_]{1,50}$/,
            message: '产品标签由1-50位数字或字母、汉字、中/下划线组成！'
          }
        ],
        info: [
          { required: true, message: '机构信息不能为空', trigger: 'blur' },
          {
            pattern: /^[A-Za-z0-9\u4e00-\u9fa5\-\_]{1,100}$/,
            message: '机构信息由1-100位数字或字母、汉字、中/下划线组成！'
          }
        ],
        cityId: [{ required: true, message: '投放城市不能为空', trigger: 'blur' }],
        openWeek: [{ required: true, message: '投放星期不能为空', trigger: 'blur' }],
        startTime: [{ required: true, message: '上架时间不能为空', trigger: 'blur' }],
        endTime: [{ required: true, message: '结束时间不能为空', trigger: 'blur' }],
        alltime: [{ required: true, message: '时间不能为空', trigger: 'blur' }],
        // company: [{ required: true, message: '公司名字不能为空', trigger: 'blur' }],
        week: [{ required: true, message: '上架星期不能为空', trigger: 'blur' }],
        status: [{ required: true, message: '必须选择推广开关', trigger: 'blur' }],
        rate: [{ required: true, message: '必须填写月利息', trigger: 'blur' }],
        lowAge: [
          { required: true, message: '最低年龄不能为空', trigger: 'blur' },
          { pattern: /^[0-9]{1,3}$/, message: '最低年龄由1-3位数字组成！' }
        ],
        highAge: [
          { required: true, message: '最高年龄不能为空', trigger: 'blur' },
          { pattern: /^[0-9]{1,3}$/, message: '最高年龄由1-3位数字组成！' }
        ],
        lowAmount: [
          { required: true, message: '最低贷款额度不能为空', trigger: 'blur' }
        ],
        highAmount: [
          { required: true, message: '最高贷款额度不能为空', trigger: 'blur' }
        ],
        lowLoanTerm: [
          { required: true, message: '最低贷款期限不能为空', trigger: 'blur' },
          {
            pattern: /^[0-9]{1,10}$/,
            message: '最低贷款期限由1-10位数字组成！'
          }
        ],
        highLoanTerm: [
          { required: true, message: '最低贷款期限不能为空', trigger: 'blur' },
          {
            pattern: /^[0-9]{1,10}$/,
            message: '最低贷款期限由1-10位数字组成！'
          }
        ]
      },
      // 上传图片选项
      ossImageUrl: [],
      // 选择城市-全选
      checkAll: false,
      // 选择城市-已经选择城市
      checkedCities: [],
      cities: ['房产', '车产', '公积金', '保险保单', '社保', '芝麻分', '身份证'],
      screlabelArr: [
        { name: '有公积金', id: 1 },
        { name: '有房产', id: 2 },
        { name: '有车产', id: 3 },
        { name: '有社保', id: 4 },
        // { name: '有保险单', id: 5 }
      ],
      ArrCheck: [
        { name: '星期日', value: 0, active: false },
        { name: '星期一', value: 1, active: false },
        { name: '星期二', value: 2, active: false },
        { name: '星期三', value: 3, active: false },
        { name: '星期四', value: 4, active: false },
        { name: '星期五', value: 5, active: false },
        { name: '星期六', value: 6, active: false }
      ],
      isIndeterminate: true
    }
  },
  created() {
    // 请求渠道数据
    this.getChannelFun()
    // 请求省市树形下拉数据
    this.cityTree()
  },
  methods: {
    // 产品详情
    async getProduct() {
      if (this.$route.query.productId) {
        const newparm = await getProduct(this.$route.query.productId)
        this.formDialog = newparm.data
        this.ossImageUrl = []
        // logo
        this.$set(this.ossImageUrl, 0, { url: this.formDialog.logo, id: 23 })
        // 所属机构
        this.optionsKey = this.formDialog.deptId
        // 城市
        const newCityArr = this.formDialog.cityId.split(',')
        for (const key in this.allCityArr) {
          const alldata = this.allCityArr[key]
          alldata.map(value => {
            newCityArr.map(newdata => {
              if (newdata == value.ccode) {
                value.active = true
              }
            })
          })
          this.upcityText()
        }
        // 时间
        const newdate = []
        const newdate2 = []
        newdate.push(this.formDialog.startTime)
        newdate.push(this.formDialog.endTime)
        newdate2.push(this.formDialog.startTime2)
        newdate2.push(this.formDialog.endTime2)
        this.alltime = newdate
        this.alltime2 = newdate2

        // 材料
        // this.materialAssets = this.formDialog.assets ? this.formDialog.assets.split(',') : []
        // this.weekArr = this.formDialog.openWeek ? this.formDialog.openWeek.split(',') : []
        this.$set(this, 'weekArr', this.formDialog.openWeek ? this.formDialog.openWeek.split(',') : [])
        // 芝麻分
        this.zhimaCreditArr = this.formDialog.zhimaCredit ? this.formDialog.zhimaCredit.split(',') : []
        this.huabeiArr = this.formDialog.huabei ? this.formDialog.huabei.split(',') : []
        this.baitiaoArr = this.formDialog.baitiao ? this.formDialog.baitiao.split(',') : []
        this.peopleBankCreditArr = this.formDialog.peopleBankCredit ? this.formDialog.peopleBankCredit.split(',') : []
        this.microLoanArr = this.formDialog.microLoan ? this.formDialog.microLoan.split(',') : []
        this.creditCardArr = this.formDialog.creditCard ? this.formDialog.creditCard.split(',') : []
        // 其他资质
        if (this.formDialog.fund == 1) this.screeningArr.push(1)
        if (this.formDialog.houseProperty == 1) this.screeningArr.push(2)
        if (this.formDialog.carProperty == 1) this.screeningArr.push(3)
        if (this.formDialog.has == 1) this.screeningArr.push(4)
        if (this.formDialog.bdStatus == 1) this.screeningArr.push(5)

        this.jobArr = this.formDialog.job ? this.formDialog.job.split(',') : []
        this.xyArr = this.formDialog.creditHistory ? this.formDialog.creditHistory.split(',') : []

      }
    },
    // 多选-星期
    checkboxChange(data) {
      this.weekArr = []
      data.map(val => {
        if (val.active) {
          this.weekArr.push(val.value)
        }
      })
    },
    // 省份选择
    cityChange(data) {
      if (data === 'all') {
        // 全选
        for (const key in this.allCityArr) {
          const alldata = this.allCityArr[key]
          alldata.map(value => { value.active = true })
          this.upcityText()
        }
      } else if (data === 'null') {
        // 全空
        for (const key in this.allCityArr) {
          const alldata = this.allCityArr[key]
          alldata.map(value => { value.active = false })
          this.upcityText()
        }
      } else {
        this.cityActive = data
        this.allcityState()
      }
    },
    // 选择全省按钮状态
    allcityState() {
      this.checkAll = true
      this.allCityArr[this.cityKey].map(value => {
        if (!value.active) this.checkAll = false
      })
    },
    // 选择全省
    allcityChange() {
      this.checkAll = !this.checkAll
      if (this.checkAll) {
        this.allCityArr[this.cityKey].map(value => {
          value.active = true
        })
      } else {
        this.allCityArr[this.cityKey].map(value => {
          value.active = false
        })
      }
      this.$forceUpdate()
      this.allcityState()
      this.upcityText()
    },
    // 选择城市-该省份下选择的城市
    cityActiveChange(data) {
      data.active = !data.active
      this.$forceUpdate()
      // this.checkAll = checkedCount == this.cityActive.length;
      this.allcityState()
      this.upcityText()
    },
    // 选择城市-该省份下选择的城市
    optionsChange(data) {
      const newparm = this.options.filter(val => val.deptId === data)[0]
      this.formDialog.deptId = newparm.deptId
      this.formDialog.deptName = newparm.deptName
    },
    // 新增-修改大额贷产品
    submitForm() {
      // 城市ID
      this.formDialog.cityId = []
      for (const key in this.allCityArr) {
        const alldata = this.allCityArr[key]
        alldata.map(value => {
          if (value.active) {
            this.formDialog.cityId.push(value.ccode)
          }
        })
      }
      this.formDialog.cityId = this.formDialog.cityId.join()
      // 上架星期
      this.formDialog.openWeek = this.weekArr.join()
      // console.log(this.formDialog.openWeek, 'this.formDialog')
      // 产品logo
      if (!this.ossImageUrl[0]) {
        this.$modal.msgError('产品logo异常')
      } else {
        this.formDialog.logo = this.ossImageUrl[0] ? this.ossImageUrl[0].url : ''
      }

      // console.log(this.formDialog.productId != null && this.formDialog.productId != '', '12312')

      this.$refs['addForm'].validate(valid => {
        if (valid) {
          // 资质要求数据遍历
          // 芝麻分
          this.formDialog.zhimaCredit = this.zhimaCreditArr[0] ? this.zhimaCreditArr.join() : null
          this.formDialog.huabei = this.huabeiArr[0] ? this.huabeiArr.join() : null
          this.formDialog.baitiao = this.baitiaoArr[0] ? this.baitiaoArr.join() : null
          this.formDialog.peopleBankCredit = this.peopleBankCreditArr[0] ? this.peopleBankCreditArr.join() : null
          this.formDialog.microLoan = this.microLoanArr[0] ? this.microLoanArr.join() : null
          this.formDialog.creditCard = this.creditCardArr[0] ? this.creditCardArr.join() : null
          // 其他资质

          this.formDialog.job = this.jobArr[0] ? this.jobArr.join() : null
          this.formDialog.creditHistory = this.xyArr[0] ? this.xyArr.join() : null

          this.formDialog.has = 0
          this.formDialog.houseProperty = 0
          this.formDialog.carProperty = 0
          this.formDialog.fund = 0
          this.formDialog.bdStatus = 0
          this.screeningArr.map((value, index) => {
            if (value == 1) this.formDialog.fund = 1
            if (value == 2) this.formDialog.houseProperty = 1
            if (value == 3) this.formDialog.carProperty = 1
            if (value == 4) this.formDialog.has = 1
            if (value == 5) this.formDialog.bdStatus = 1
          })

          // 所需材料
          // this.formDialog.assets = this.materialAssets[0] ? this.materialAssets.join() : null

          if (this.formDialog.productId != null && this.formDialog.productId != '') {
            // console.log('updateProduct', 修改)
            updateProduct(this.formDialog)
              .then(response => {
                this.$modal.msgSuccess('修改成功')
                this.$router.push({ path: '/product/productApplysList' })
              })
              .finally(() => {
              })
          } else {
            // console.log('addProduct', 新增)
            addProduct(this.formDialog)
              .then(response => {
                this.$modal.msgSuccess('新增成功')
                this.$router.push({ path: '/product/productApplysList' })
              })
              .finally(() => {
              })
          }
        }
      })
    },
    // 请求省市树形下拉数据
    async cityTree() {
      const parm = await cityTree()
      this.allCityArr = parm.data
      // 如果get参数有id，则修改产品信息(获取产品详情)
      this.getProduct()
    },
    // 获取所有渠道
    getChannelFun() {
      getChannel().then(response => {
        this.options = response.data
      })
    },
    // 更新选中城市名称
    upcityText() {
      this.cityArrHtml = ''
      for (const key in this.allCityArr) {
        const alldata = this.allCityArr[key]
        alldata.map(value => { if (value.active) this.cityArrHtml += ` ${value.cname} ` })
      }
    },
    // 选择城市-全选
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.cityActive : []
      this.cityArr.push(...this.checkedCities)
      this.upcityText()
      this.isIndeterminate = false
    },
    // 时间选择
    changtime(newtime) {
      this.formDialog.startTime = newtime ? newtime[0] : ''
      this.formDialog.endTime = newtime ? newtime[1] : ''
    },
    // 时间选择2
    changtime2(newtime2) {
      this.formDialog.startTime2 = newtime2 ? newtime2[0] : ''
      this.formDialog.endTime2 = newtime2 ? newtime2[1] : ''
    },
    nullScreenin() {
      this.screeningArr = ['null']
    },
    handlezhimaChange() {
      this.screeningArr.map((data, index) => {
        if (data == 'null') {
          this.screeningArr.splice(index, 1)
        }
      })
    },
    onMouseOver() {
      this.isShowTooltip = this.cityArrHtml.length < 62
    },
    getList() {

    }
  }
}
</script>

<style scoped lang="scss">
.productApplysAdd {
  padding: 20px;
  .button_center{
    line-height: 40px;
  }
  .r_text_line{
    padding: 0 20px;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }
  .el-input-group__append, .el-input-group__prepend{
    color: #918ef9 !important;
  }

}

.el-checkbox ::after {
  transition: none!important;
}
</style>

<style lang="css">
.productApplysAdd .el-input-group__append {
  color: #008FFE !important;
}

.productApplysAdd .el-input.is-disabled .el-input__inner {
  color: #008FFE;
}
</style>
